<template>
  <div class="wrapper">

    <!-- header部分 -->
    <header class="header">
      <!-- 搜索框 -->
      <div class="search-bar">
        <div class="search-input">
          <span>奶茶</span>
          <i class="fa fa-times-circle"></i>
        </div>
        <i class="fa fa-search search-icon"></i>
      </div>
    </header>

    <!-- 排序选项 -->
    <div class="sort-bar">
      <div class="sort-item active">
        综合排序
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="sort-item">销量优先</div>
      <div class="sort-item">速度优先</div>
      <div class="sort-item">
        筛选
        <i class="fa fa-angle-down"></i>
      </div>
    </div>

    <!-- 商家列表部分 -->
    <ul class="business">
      <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
        <div class="business-tag">品牌</div>
        <div class="business-img">
          <img :src="item.businessImg">
          <div class="business-img-quantity" v-show="item.quantity>0">
            {{item.quantity}}</div>
        </div>
        <div class="business-info">
          <h3 class="business-name">{{item.businessName}}</h3>
          <div class="business-rating">
            <span class="score">{{item.score || '4.5'}}分</span>
            <span class="sales">月售{{item.monthSales || '1000+'}}</span>
            <span class="time">{{item.deliveryTime || '32'}}分钟</span>
            <span class="distance">{{item.distance || '4.4km'}}</span>
          </div>
          <div class="delivery-line">
            <span>起送¥{{item.starPrice}}</span>
            <span class="delivery">配送</span>
            <span>约¥{{item.deliveryPrice}}</span>
            <span class="origin-price">¥4.5</span>
            <span class="delivery-tag">蜂鸟准时达</span>
          </div>
          <div class="promotion-box">
            <div class="promotion-tag">
              <i class="fire-icon">🔥</i>
              <span>近30日84人复购</span>
            </div>
          </div>
          <div class="activity-box">
            <div class="activity-tag">
              <i class="crown-icon">👑</i>
              <span>最高28</span>
            </div>
            <div class="activity-tag">10元</div>
            <div class="activity-tag red">85减8</div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 底部菜单部分 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance } from 'vue'
import Footer from './Footer.vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const orderTypeId = ref(route.query.orderTypeId)
const businessArr = ref([])
const user = ref({})

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  user.value = proxy.$getSessionStorage('user')
  if (!user.value) {
    ElMessage.warning('用户信息已失效，请重新登录')
    router.push('/login')
    return
  }
  
  // 根据orderTypeId查询商家信息
  request({
    url: '/BusinessController/listBusinessByOrderTypeId',
    method: 'get',
    params: {
      orderTypeId: orderTypeId.value
    }
  }).then(response => {
    businessArr.value = response.data
    // 判断是否登录
    if (user.value != null) {
      listCart()
    }
  }).catch(error => {
    console.error(error)
    if (error.response?.status === 403) {
      ElMessage.error('登录已过期，请重新登录')
      sessionStorage.removeItem('token')
      proxy.$removeSessionStorage('user')
      router.push('/login')
    } else {
      ElMessage.error('获取商家列表失败')
    }
  })
})

const listCart = () => {
  request({
    url: '/CartController/listCart',
    method: 'get',
    params: {
      userId: user.value.userId
    }
  }).then(response => {
    let cartArr = response.data
    // 遍历所有食品列表
    for (let businessItem of businessArr.value) {
      businessItem.quantity = 0
      for (let cartItem of cartArr) {
        if (cartItem.businessId == businessItem.businessId) {
          businessItem.quantity += cartItem.quantity
        }
      }
    }
    businessArr.value.sort()
  }).catch(error => {
    console.error(error)
    ElMessage.error('获取购物车信息失败')
  })
}

const toBusinessInfo = (businessId) => {
  router.push({
    path: '/businessInfo',
    query: { businessId }
  })
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}
/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 44px;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 0;
}

/****************** 搜索框样式 ******************/
.search-bar {
  width: 100%;
  position: relative;
  padding: 0 12px;
}
.search-input {
  background: #f5f5f5;
  border-radius: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px 0 12px;
}
.search-input span {
  color: #333;
  font-size: 14px;
}
.search-input i {
  color: #999;
  font-size: 14px;
  position: absolute;
  right: 45px;
}
.search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 16px;
}
/****************** 排序栏样式 ******************/
.sort-bar {
  margin-top: 44px;
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #f5f5f5;
}
.sort-item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}
.sort-item.active {
  color: #0097FF;
  font-weight: 500;
}
.sort-item i {
  font-size: 12px;
  margin-left: 2px;
}
/****************** 商家列表部分 ******************/
.wrapper .business {
  width: 100%;
  
  margin-bottom: 14vw;
  padding: 12px;
  box-sizing: border-box;
  background: #f5f5f5;
}
.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #fff;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  border: none;
}
.wrapper .business li .business-img {
  position: relative;
  width: 65px;
  height: 65px;
  border-radius: 4px;
  overflow: visible;
}
.wrapper .business li .business-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.wrapper .business li .business-img .business-img-quantity {
  width: 18px;
  height: 18px;
  background-color: #ff4e4e;
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.wrapper .business li .business-info {
  margin-left: 12px;
  flex: 1;
}
.wrapper .business li .business-info h3 {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 8px;
}
.wrapper .business li .business-info p {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
  line-height: 1.4;
}
.wrapper .business li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.business-tag {
  position: absolute;
  left: 15px;
  top: 15px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 12px;
}

.business-rating {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.score, .sales, .time, .distance {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.score {
  color: #ff6b01;
}

.delivery-line {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.delivery {
  margin: 0 5px;
}

.origin-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 4px;
}

.delivery-tag {
  background: #fff5e6;
  color: #ff6b01;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 8px;
  font-size: 12px;
}

.promotion-box {
  margin-bottom: 5px;
}

.promotion-tag {
  display: inline-flex;
  align-items: center;
  background: #fff5e6;
  color: #ff6b01;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.activity-box {
  display: flex;
  flex-wrap: wrap;
}

.activity-tag {
  display: inline-flex;
  align-items: center;
  background: #fffbf1;
  border: 1px solid #ffe4b7;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.activity-tag.red {
  color: #ff4e00;
  background: #fff3f0;
  border: 1px solid #ffd4cc;
}

.fire-icon, .crown-icon {
  margin-right: 2px;
  font-size: 12px;
}
</style>